<script setup lang="ts">
import { reactive, computed } from 'vue';

// 直接在返回的对象变量之后声明类型约束
type ToDo = {
  id: number;
  task: string;
  done: boolean;
  rating?: number; // 可选属性
};

const todo: ToDo = reactive({ id: 1, task: '敲代码', done: false });
todo.rating = 10;

// 基于 done 算一个属性，任务完成的描述
const doneText = computed<string>(() => {
  return todo.done ? '完成' : '未完成';
});

// 也可以利用ts推断
const doneText2 = computed(() => {
  return todo.done ? '完成' : '未完成';
});
</script>

<template>
  <div>{{ doneText }}</div>
</template>

<style scoped></style>
